<template>
  <div class="Login">
    <div class="Login_box">
      <div class="Login_headImg">
        <img src="~static/images/login/bg_image_material_two.png" alt="">
      </div>
      <div class="Login_form">
        <div class="Login_form_group">
          <input placeholder="请输入手机号" class="Login_form_input" v-model="mobile" name="mobile" maxlength="11" type="tel" :class="{'Login_form_input_danger':errors.has('mobile')}" v-validate="{required:true,max:11,min:11,regex:isMobile}" />
          <p class="Login_form_tip">
            <span v-show="errors.has('mobile')">{{errors.first('mobile')}}</span>
          </p>
        </div>
        <div class="Login_form_group">
          <input placeholder="请输入动态码" class="Login_form_input" v-model="code" name="code" maxlength="4" type="text" :class="{'Login_input_danger':errors.has('code')}" v-validate="'required|digits:4'" />
          <button class="Login_form_getCode fr" v-timer :data-validate="errors.has('mobile')" @click="sendSemCode">获取动态码</button>
          <p class="Login_form_tip">
            <span v-show="errors.has('code')">{{errors.first('code')}}</span>
          </p>
        </div>
        <nuxt-link to="/login" class="Login_form_codeLogin fr">账号密码登录</nuxt-link>
        <div class="Login_form_footer">
          <img src="~/static/images/login/button_normal.png" alt="" class="Login_form_submit" @click="doSubmit">
          <nuxt-link to="/findpassword" class="Login_form_forgetPwd">忘记密码</nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isMobile } from '~/utils/regx'
import { haslogin } from "~/middleware/logincheck"
import { sendSmsCode, loginOnSmsCode } from '~/api/'
export default {
  middleware: haslogin,
  data() {
    return {
      isMobile,
      mobile: "",
      code: ""
    }
  },
  methods: {
    sendSemCode() {
      this.$validator.validate('mobile').then(async (result) => {
        if (!result) return
        const res = await sendSmsCode(this, 'LOGIN', this.mobile)
        if (res.code === '0') {
          this.$message.success('验证码发送成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    doSubmit(){
      this.$validator.validateAll().then(async (result)=>{
        if (!result) return
        const res=await loginOnSmsCode(this,this.mobile,this.code)
        if(res.code==='0'){
          this.$store.dispatch('setLoginStatus',this.mobile)
          this.$message.success('登录成功')
          this.$router.replace('/')
        }else{
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
